<template>
  <el-drawer
    title="设置轮播图"
    v-model="dialogVisible"
    size="50%"
    destroy-on-close
  >
    <el-form ref="formRef" :model="form"  >
      <el-form-item label="轮播图" >
        <ChooseImage v-model="form.banners" :limit="4" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit"> 提交</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script setup>
import { reactive, ref } from "vue";
import ChooseImage from "~/components/ChooseImage.vue";
import {
  getProduct,
  createProduct,
  updateProduct,
  deleteProduct,
  getOneProduct,
} from "~/api/product.js";
import { toast } from "~/composables/util";
const dialogVisible = ref(false);
const form = reactive({
  banners: [],
});

const productId = ref(0);
const open = (row) => {
  productId.value = row.id;
  getOneProduct(productId.value).then((res) => {
    
    form.banners = res.banners;
  });
  dialogVisible.value = true;
};

const emit=defineEmits('reloadData')
const submit = () => {
  let image=form.banners.toString()
  updateProduct(productId.value,{banners:image}).then(res=>{
    toast('設置成功')
    dialogVisible.value=false
    emit('reloadData')
  })
};
defineExpose({
  open,
});
</script>
